<script setup>
import { ref } from 'vue'
import { NewsTypes } from '@/mock/news'
import $router from '@/router'

const items = NewsTypes
const current = ref(items[0])

function command(type, index = null) {
  $router.push({ path: '/zczx', query: { type, index } })
}
</script>
<template>
  <div class="container mx-auto w-full py-5">
    <HeadLine title="新闻资讯" />
    <section class="flex align-items-start align-content-start bg-white">
      <div class="flex-none overflow-x-visible">
        <div
          v-for="(item, index) of items"
          class="cursor-pointer w-12rem h-12rem border-noround flex justify-content-center align-items-center relative"
          :key="index"
          :label="item.type"
          @click="current = item"
        >
          <img src="/imgs/union.png" class="absolute w-full" v-if="item.type == current.type" />
          <p class="text-2xl z-20 relative" :class="{ 'text-white': item.type == current.type }">
            {{ item.type }}
          </p>
        </div>
      </div>

      <div class="w-full h-full p-3 px-5 flex flex-column align-items-start gap-1">
        <section class="flex justify-content-between align-items-center w-full">
          <span class="border-bottom-3 border-primary text-3xl pb-2">{{ current.type }}</span>
          <span class="text-xl text-color-secondary cursor-pointer" @click="command(current.type)"
            >阅读更多 >></span
          >
        </section>

        <span
          v-for="(post, index) of current.data.slice(0, 10)"
          :key="index"
          @click="command(current.type, index)"
          class="w-full flex justify-content-between text-xl py-0 cursor-pointer text-700 mb-1"
        >
          <span>{{ post.title }}</span>
          <span>{{ post.date }}</span>
        </span>
      </div>
    </section>
  </div>
</template>
